<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div style="background-color: skyblue;" class="swiper-slide">Slide 1</div>
            <div style="background-color: orangered;" class="swiper-slide">Slide 2</div>
            <div style="background-color: greenyellow;" class="swiper-slide">Slide 3</div>
            <div style="background-color: pink;" class="swiper-slide">Slide 4</div>
            <div style="background-color: purple;" class="swiper-slide">Slide 5</div>

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script src="./swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            //   autoplay:true, //自动轮播
            autoplay: {
                delay: 3000
            },
            grabCursor: true, // 抓手形状 
            effect: 'flip', // 切换效果
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                // 这一页切换结束 告诉我这是第几章 
                slideChangeTransitionEnd: function () {
                    console.log('正在执行',this.activeIndex,'页动画');//切换结束时，告诉我现在是第几个slide
                },
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })        
    </script>
</body>

</html>